<#assign ctx=request.contextPath/>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>购物车</title>
<link rel="stylesheet" href="${ctx}/css/common.css" />
<link rel="stylesheet" href="${ctx}/css/shop_cart.css" />
<script type="text/javascript" src="${ctx}/js/jquery.min.js"></script>
<script type="text/javascript" src="${ctx}/js/common.js"></script>
<script type="text/javascript">
var carPrice=function(){
	//获取选中的checkbox的值
	var boxs=$("input[type='checkbox'][id^='box_']");
	//定义总金额数
	var totalPrice=0;
	//判断checkbox是否有选中
	if(boxs.length>0){
		//迭代选中的checkbox
		boxs.each(function(){
		//获取价格
		var price = parseFloat($(this.id.replace("boxs", "#price")).html());
		//商品数量
		var num = parseInt($(this.id.replace("boxs", "#num")).val());
		//计算金额
		totalPrice += price * num;
		});
		//设置显示的总金额===购物车存在商品
		$("#totalPrice").html("¥ "+ totalPrice +" 元");
	}else{
		//设置显示的总金额====购物车没有商品
		$("#totalPrice").html("¥ 0.00 元");
	}
} 
</script>
</head>

<body onload="loadCar(),checkChange()">
	<!--头部-->
	<div class="header">
	<#include "common/top.html"> 
	<#include "common/shoplist.html"></div>
	<!--内容-->
	<div class="middle">
		<div class="box">
			<font style="color: red;" size="5px">${tip!''}</font>
			<table cellpadding="0" cellspacing="0" border="0">
				<thead>
					<tr>
						<td colspan="6"><span><a
								href="${ctx}/javascript:void(0)">全场商品</a></span> <span><a
								href="${ctx}/javascript:void(0)">降价商品</a></span> <span><a
								href="${ctx}/javascript:void(0)">库存紧张商品</a></span> <span>已选商品 <i
								class="price"></i></span> <span class="pay"><a
								href="confirm_order.html">结算</a></span></td>
					</tr>

					<tr>
						<th><label><input type="checkbox" id="checkAll" />全部</label></th>
						<th>商品信息</th>
						<th>数量</th>
						<th>单价</th>
						<th>金额</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<#if shopsList??> <#list shopsList as shopList>
					<tr>
						<td><input type="checkbox" id="box_${shopList.id}"></td>
						<td><img src="${ctx}/img/upload/${shopList.image}" alt=""
							width="100px" height="100px"></td>
						<td><a href="#"> <#if shopList.title?length gt 20
								>${shopList.title?substring(0,20)} <#else> ${shopList.title}
								</#if> </a></td>
						<td>¥ <span id="price_${shopList.id}">${shopList.price?c}</span></td>
						<td class="td_"><a class="_jbtn"
							href="javascript:updateCar(${shopList.id},1)">-</a> <input
							type="text" value="${shopList.buyNum}" size="2"
							id="num_${shopList.id}" /> <a class="jbtn_"
							href="javascript:updateCar(${shopList.id},2)">+</a></td>
						<td>¥ <span id="total_${shopList.id}">${(shopList.price*shopList.buyNum)?c}</span></td>
						<td><a href="${ctx}/customer/buy/cleanCar?cleanId=${shopList.id}">删除</a></td>
					</tr>
					</#list> 
					<#else>
					<h1>
						购物车为空!<a href="${ctx}/customer/home"> 先逛逛</a>
					</h1>
					</#if>
					<script type="text/javascript">
					$(function(){
						//单选
						$("input[type='checkbox'][id^='box_']").click(function(){	
							//定义总数
							var total = 0.0;
							//获取选中文本框的id值
 							var selectIds = $("input[type=checkbox]:checked");
 							//将选中文本框的id值迭代出来
 							for(var i = 0;i<selectIds.length;i++){
								console.log($(selectIds[i]).attr('id'));
								var id = $(selectIds[i]).attr('id').replace("box_","");
								var sTotal = $("#total_"+id).text();					
								total = total + parseFloat(sTotal);
 							} 
 							$("#total").text(total);
						}); 
					});
					function updateCar(id,tag){
						//获取已加入购物车的数量
						var num=$("#num_"+id).val();
						if(tag==1){
							if(num>1){
								num--;
							}else{
								num==1;}
						}else{
							if(num<99){
								num++;}
						}
						$.post("${ctx}/customer/buy/updateShopCar",{"shopsId":id,"num":num},
								function(data){
							$("#num_"+id).val(num);
							
						})
						
					}
					</script>
				</tbody>
				<tfoot>
					<tr>
						<td colspan="6"><span><label><input type="checkbox" id="checkAll" />全部</label></span> <span><a
								href="${ctx}/javascript:void(0)" onclick="dels()">删除</a></span> <span><a
								href="${ctx}/javascript:void(0)">移入收藏夹</a></span> <span><a
								href="${ctx}/javascript:void(0)">分享</a></span> <span>已选商品 <i
								id="choose_num">22s</i>件
						</span> <span id="totalPrice">合计 <i id="total">0.0</i></span></td>
					</tr>
				</tfoot>

			</table>
			<script type="text/javascript">
				//多选
				$("#checkAll").click(function(){
					$("input[type='checkbox'][id^='box_']").attr("checked", this.checked);
						//定义总数
						var total = 0.0;
						//获取选中文本框的id值
						var selectIds = $("input[type=checkbox][id^='box_']:checked");
						//将选中文本框的id值迭代出来
						for(var i = 0;i<selectIds.length;i++){
							console.log($(selectIds[i]).attr('id'));
							var id = $(selectIds[i]).attr('id').replace("box_","");
							var sTotal = $("#total_"+id).text();					
							total = total + parseFloat(sTotal);
						} 
						$("#total").text(total);
					})
					/* var boxs=$("input[type='checkbox'][id^='box_']");
					boxs.click(function(){
						$("#checkAll").attr("checked",boxs.length == boxs.filter(":checked").length)
					}) */
			</script>
		</div>
	</div>
	<!--尾部-->
	<#include "common/bottom.html">
	<script type="${ctx}/text/javascript" src="js/shopCar.js"></script>
	<script type="${ctx}/text/javascript" src="js/shop_cart.js"></script>
</body>
</html>